<template>
    <div>
        <div>
            {{ fullName }}
        </div>
        <br /><br />
        <div style="margin-top: 20px;">
          姓名： <n-input v-model:value="usernameRef" @input="onChange"></n-input>
        </div>

        <div style="margin-top: 20px;">
            性别： <n-radio-group v-model:value="genderRef" name="radiogroup">
                <n-space>
                    <n-radio v-for="song in ['男','女']" :key="song" :value="song">
                        {{ song }}
                    </n-radio>
                </n-space>
            </n-radio-group>
        </div>

        <div style="margin-top: 20px;">
            爱好： <n-input v-model:value="hobbyRef"></n-input>
        </div>

        <div style="margin-top: 20px;">
            提交人： <n-input  v-model:value="author"></n-input>
        </div>

        <n-button type="primary" style="margin-top: 20px;" @click="OnAdd()">
            提交
        </n-button>
    </div>
</template>
<script setup lang="ts">

import { ref,defineProps,defineEmits, watch, computed } from 'vue'

import { useMainStore } from '@/store'
import { storeToRefs } from 'pinia'

const props = defineProps({
    defUsername:String,
    submitClick:Function
})

//定义一个事件
const emit = defineEmits(["OnAdd"])

//初始化变量
const usernameRef = ref<String>(props.defUsername)
const genderRef = ref<String>("男")
const hobbyRef = ref<String>()
const itemRef = ref<[]>([])



const main = useMainStore() 

const { author } =  storeToRefs(main)

//计算属性
const fullName = computed(()=>{
    return `${usernameRef.value}-${genderRef.value}`
})

//函数
function  OnAdd() { 
  //整个过程，在JS脚本中没有去操作DOM，完全是有数据模型驱动DOM结构变化

//   itemRef.value.push() 

//   props.submitClick(itemRef.value)

  emit("OnAdd", {
    username:usernameRef.value,
    gender:genderRef.value,
    hobby:hobbyRef.value
  }) 

  main.$patch()
}

function onChange(event) {
  console.log(event)
}

watch(usernameRef,(n,o)=>{
    console.log(n,o)
})


</script>